.carousel {
	position: relative;
	overflow: hidden;

	&__items {
		position: relative;
		width: 100%;
	}

	&__item {
		display: none;
		float: left;
		margin-right: -100%;
		width: 100%;

		&--active {
			display: block;
		}

		& > * {
			display: block;
			width: 100%;
		}
	}

	&__indicators {
		position: absolute;
		bottom: $spacing-scale-6;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	&__indicator {
		display: block;
		&:not(:first-child) {
			margin-left: 1rem;
		}
	}

	&__indicator-btn {
		display: block;
		background: #fff;
		width: .8rem;
		height: .8rem;
		border-radius: 50%;
		opacity: .4;
		cursor: pointer;
		box-shadow: 0 1px 1px 0px rgba(#000, .2);
		transition: all .15s ease-out;

		&--active {
			opacity: 1;
			transform: scale3d(1.4, 1.4, 1);
			box-shadow: none;
		}

		&:hover {
			opacity: 1;
		}

		&:focus {
			outline: none;
		}
	}

	&__control {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: $icon-color;
		background-color: rgba(#fff, .4);
		padding: .6rem;
		border-radius: 50%;
		opacity: 0;
		cursor: pointer;
		transition: all .3s ease-out;

		&:hover {
			background-color: rgba(#fff, .8);
			box-shadow: 0 1px 4px 0px rgba(#000, .2);
		}

		&:focus {
			outline: none;
		}

		&--prev {
			left: $spacing-scale-6;
			transform: translate3d(-$spacing-scale-5, -50%, 0);
		}

		&--next {
			right: $spacing-scale-6;
			transform: translate3d($spacing-scale-5, -50%, 0);
		}

		&--active {
			opacity: 1;
			transform: translate3d(0, -50%, 0);
		}
	}

	&__slide-anim-left-enter {
		display: block;
		transform: translate3d(100%, 0, 0);

		&-active {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition: all 1s ease-out;
		}
	}

	&__slide-anim-left-exit {
		display: block;
		transform: translate3d(0, 0, 0);
		opacity: 1;

		&-active {
			opacity: 0;
			transform: translate3d(-100%, 0, 0);
			transition: all 1s ease-out;
		}
	}

	&__slide-anim-right-enter {
		display: block;
		transform: translate3d(-100%, 0, 0);

		&-active {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition: all 1s ease-out;
		}
	}

	&__slide-anim-right-exit {
		display: block;
		transform: translate3d(0, 0, 0);
		opacity: 1;

		&-active {
			opacity: 0;
			transform: translate3d(100%, 0, 0);
			transition: all 1s ease-out;
		}
	}
}
